#{extends 'home.html' /}
<h1 class="viewTitle">User Profile Settings</h1>
<div class="viewContent">
	
	#{if session.get("username") == null}
		<p>You must be logged in in order to be able to view your user profile.</p>
		<br>
	
	<a href = "@{Secure.login()}">Login now</a>
	<a href = "@{Users.register()}">New user? register now!</a>
	#{/if}
	
	#{else}
		#{if message != null && !message.equals("")}
				<div><p>${message}</p></div><br>
		#{/if}
		#{if error != null && !error.equals("")}
				<div><p class="error">${error}</p></div><br>
		#{/if}
		#{form @Users.submitProfileChanges()}
			<h5>Account Preferences</h5>
			<div style="border:2px;border-style:solid;border-color:white;">	
				<div class="formLabel" style="width:200px;"><label>Name</label></div>
				${user.name}
				<div class="clear"></div>
				
				<div class="formLabel" style="width:200px;"><label>Date of Birth</label></div>
				${user.dateOfBirth.getYear()+1900}-${user.dateOfBirth.getMonth()+1}-${user.dateOfBirth.getDate()}
				<div class="clear"></div>
				
				<div class="formLabel" style="width:200px;"><label>Username</label></div>
				${user.userName}
				<div class="clear"></div>
				
				<div class="formLabel" style="width:200px;"><label>Address</label></div>
				<input type="text" name="address" value="${user.address}"></input>
				<div class="clear"></div>
				
			</div>
			<br>
			<h5>Viewing Preferences</h5>
			<div style="border:2px;border-style:solid;border-color:white;">	
				
				<div class="formLabel" style="width:200px;"><label>Show name</label></div>
				#{if showName}
					<input type="checkbox" name="showName" value="showName" checked></input>
				#{/if}
				#{else}
					<input type="checkbox" name="showName" value="showName"></input>
				#{/else}
				<div class="clear"></div>
				
				<div class="formLabel" style="width:200px;"><label>Show date of birth</label></div>
				#{if showDOB}
					<input type="checkbox" name="showDOB" value="showDOB" checked></input>
				#{/if}
				#{else}
					<input type="checkbox" name="showDOB" value="showDOB"></input>
				#{/else}
				<div class="clear"></div>
				
				<div class="formLabel" style="width:200px;"><label>Show address</label></div>
				#{if showAddress}
					<input type="checkbox" name="showAddress" value="showAddress" checked></input>
				#{/if}
				#{else}
					<input type="checkbox" name="showAddress" value="showAddress"></input>
				#{/else}
				<div class="clear"></div>
				
				<div class="formLabel" style="width:200px;"><label>Show email</label></div>
				#{if showEmail}
					<input type="checkbox" name="showEmail" value="showEmail" checked></input>
				#{/if}
				#{else}
					<input type="checkbox" name="showEmail" value="showEmail"></input>
				#{/else}
				<div class="clear"></div>
			</div>
			<br>
			<script type="text/javascript">
				<!--
				
				function passwordChange() {
   					var oldPassword = document.getElementsByName("oldPassword")[0].value;
					var newPassword = document.getElementsByName("newPassword")[0].value;
					var confirmPassword = document.getElementsByName("confirmPassword")[0].value;
					
					var oldPasswordError = document.getElementById("oldPasswordError");
					var newPasswordError = document.getElementById("newPasswordError");
					var confirmPasswordError = document.getElementById("confirmPasswordError");
					
					var oldEmail = document.getElementsByName("oldEmail")[0].value;
					var newEmail = document.getElementsByName("newEmail")[0].value;
					var confirmEmail = document.getElementsByName("confirmEmail")[0].value;
					
					var submitButton = document.getElementById("submit");
					
					if (oldPassword != "" || newPassword != "" || confirmPassword != "") {
						if (oldPassword == "") {
							oldPasswordError.innerHTML = "Please enter you current password.";
						} else {
							oldPasswordError.innerHTML = "";
						}
						if (confirmPassword == "") {
							confirmPasswordError.innerHTML = "Please confirm your new password.";
						} else {
							confirmPasswordError.innerHTML = "";
						}
						if (newPassword == "") {
							newPasswordError.innerHTML = "Please enter your new password.";
						} else {
							newPasswordError.innerHTML = "";
						}
					} else {
						oldPasswordError.innerHTML = "";
						newPasswordError.innerHTML = "";
						confirmPasswordError.innerHTML = "";
					}
					
					if ((oldPassword != "" && newPassword != "" && confirmPassword != "")
					|| (oldPassword == "" && newPassword == "" && confirmPassword == "")
					&& ((oldEmail != "" && newEmail != "" && confirmEmail != "")
					|| (oldEmail == "" && newEmail == "" && confirmEmail == ""))) {
						submitButton.disabled = false;
					} else submitButton.disabled = true;
				}
				//-->
				</script>
			<h5>Password Preferences</h5>
			<div style="border:2px;border-style:solid;border-color:white;" class="formEntry">
				<div class="formLabel" style="width:200px;"><label>Old password</label></div>
				<input type="password" name="oldPassword" value=""
					onkeyup="passwordChange();"></input>
				<span class="error" id="oldPasswordError"></span>
				<div class="clear"></div>
				
				<div class="formLabel" style="width:200px;"><label>New password</label></div>
				<input type="password" name="newPassword" value=""
					onkeyup="passwordChange();"></input>
				<span class="error" id="newPasswordError"></span>
				<div class="clear"></div>
				
				<div class="formLabel" style="width:200px;" style="width:100px"><label>Confirm new password</label></div>
				<input type="password" name="confirmPassword" value=""
					onkeyup="passwordChange();"></input>
				<span class="error" id="confirmPasswordError"></span>
				<div class="clear"></div>
			</div>
			<br>
			<script type="text/javascript">
				<!--
				
				function emailChange() {
   					var oldEmail = document.getElementsByName("oldEmail")[0].value;
					var newEmail = document.getElementsByName("newEmail")[0].value;
					var confirmEmail = document.getElementsByName("confirmEmail")[0].value;
					
					var oldEmailError = document.getElementById("oldEmailError");
					var newEmailError = document.getElementById("newEmailError");
					var confirmEmailError = document.getElementById("confirmEmailError");
					
					var oldPassword = document.getElementsByName("oldPassword")[0].value;
					var newPassword = document.getElementsByName("newPassword")[0].value;
					var confirmPassword = document.getElementsByName("confirmPassword")[0].value;
					
					var submitButton = document.getElementById("submit");
					
					if (oldEmail != "" || newEmail != "" || confirmEmail != "") {
						if (oldEmail == "") {
							oldEmailError.innerHTML = "Please enter you current Email.";
						} else {
							oldEmailError.innerHTML = "";
						}
						if (confirmEmail == "") {
							confirmEmailError.innerHTML = "Please confirm your new Email.";
						} else {
							confirmEmailError.innerHTML = "";
						}
						if (newEmail == "") {
							newEmailError.innerHTML = "Please enter your new Email.";
						} else {
							newEmailError.innerHTML = "";
						}
					} else {
						oldEmailError.innerHTML = "";
						newEmailError.innerHTML = "";
						confirmEmailError.innerHTML = "";
					}
					
					if (((oldPassword != "" && newPassword != "" && confirmPassword != "")
					|| (oldPassword == "" && newPassword == "" && confirmPassword == ""))
					&& ((oldEmail != "" && newEmail != "" && confirmEmail != "")
					|| (oldEmail == "" && newEmail == "" && confirmEmail == ""))) {
						submitButton.disabled = false;
					} else submitButton.disabled = true;
				}
				//-->
				</script>
			<h5>Email Preferences</h5>
			<div style="border:2px;border-style:solid;border-color:white;">
				<div class="formLabel" style="width:200px;"><label>Current email address</label></div>
				<input type="text" name="oldEmail"
					onkeyup="emailChange();"></input>
				<span class="error" id="oldEmailError"></span>
				<div class="clear"></div>
				
				<div class="formLabel" style="width:200px;"><label>New email address</label></div>
				<input type="text" name="newEmail"
					onkeyup="emailChange();"></input>
				<span class="error" id="newEmailError"></span>
				<div class="clear"></div>
				
				<div class="formLabel" style="width:200px;"><label>Confirm new email address</label></div>
				<input type="text" name="confirmEmail"
					onkeyup="emailChange();"></input>
				<span class="error" id="confirmEmailError"></span>
				<div class="clear"></div>
			</div>
			<br>
			<input style="float:left;" type="submit" value="Submit changes" id="submit"></input>
		#{/form}
		#{form @Users.viewUserProfile()}
			<input style="float:left;" type="submit" value=" Cancel "></input>
			<div class="clear"></div>
		#{/form}
	#{/else}
</div>